<template>
	<m-layout title="店铺" :isShow="false" :isLoading="loading">
		<m-search slot="header" v-model="search" :verify="false" :isJump="false" placeholderText='请输入商品名称'
			lIconColor="#111" class="header" @goSearch="reset" @onClear="reset">
		</m-search>
		<!-- 店铺信息 -->
		<m-block class="flex-between" gap="30 24" radius="0 0 20 20">
			<m-image size="130" radius="30" :src="shopInfo.picurl"></m-image>
			<view class="flex-1 flex-between">
				<view class="ml-20">
					<view class="fs30 fw-600">{{shopInfo.shopname}}</view>
					<view class="flex mt-12">
						<view class="fs24 text-grey">{{shopInfo.ccount}}人收藏</view>
					</view>
				</view>
				<view @click="shopCollection">
					<view v-if="!shopInfo.isc" class="label flex jc-center">
						<m-icon size="30" color="#FFFFFF" type="icon-a-tianjiaguanzhuguanzhu"></m-icon>
						<view class="fs21 ml-4">收藏</view>
					</view>
					<view v-else class="label2 flex fs21 jc-center">已收藏</view>
				</view>
			</view>
		</m-block>
		<!-- 条件筛选 -->
		<m-sticky :offsetTop="51" :customNavHeight="topNavHeight">
			<condition :sort='sort' @setType="sort = $event" @setPrice="setPrice" :priceShow="false" />
		</m-sticky>
		<!-- 商品列表 -->
		<m-block gap="0 24" bgColor="unset">
			<template v-for="item in listArr">
				<goodsCard :item="item" type="2" :hideShop="true"></goodsCard>
			</template>
			<m-loading gap="100 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
		</m-block>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { MallShopInfo, GetGoodsPage, CollectGoods } from "@/api/Goods.js"
	import condition from "../components/condition.vue"
	export default {
		name: '',
		components: { condition },
		data() {
			return {
				sort: 0, // 默认排序
				filterData: {}, // tag筛选数据
				loading: false,
				search: '',
				shopID: '',
				shopInfo: {},
				isCollection: false,
				listArr: [],
				pageIndex: 1,
				pageSize: 10,
				pageCount: 1,
				isLoading: false,
			};
		},
		computed: {
			...mapState({
				topNavHeight: state => state.general.topNavHeight,
			}),
		},
		async onLoad({ sid }) {
			this.loading = true;
			this.shopID = sid;
			await this.getSellerDetail();
			await this.getData();
			this.loading = false;;
		},
		onShow() {

		},
		watch: {
			sort(val) {
				console.log('val===>', val);
				this.reset()
			},
		},
		methods: {
			setPrice(filterData = {}) {
				console.log('filterData===>', filterData)
				const {ishot,isnew,istop}=filterData;
				this.filterData = {ishot,isnew,istop};
				this.reset()
			},
			async reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				await this.getData();
				this.loading = false;;
			},

			// 店铺收藏
			async shopCollection() {
				const res = await CollectGoods({
					goodsId: this.shopID,
					collect: !this.shopInfo.isc,
					ctype: 2,
				})
				this.Toast(res.msg);
				if (res.success) {
					this.getSellerDetail();
				}
			},
			// 获取店铺信息
			async getSellerDetail() {
				const { success, data } = await MallShopInfo({
					id: this.shopID
				});
				console.log('data===>', data)
				if (success) {
					this.shopInfo = data;
				}
				console.log("店铺信息：", this.shopInfo)
			},
			async getData() {
				this.isLoading = true;
				if (this.pageIndex > this.pageCount) {
					return this.isLoading = false;
				}
				const { success, list, pageCount } = await GetGoodsPage({
					...this.filterData,
					sort: this.sort,
					key: this.search,
					sid: this.shopID,
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		::v-deep .search-Item {
			background: #F5F5F5;
		}
	}

	.shaixuan {
		padding: 24rpx;
		flex: 1;
		background: #F6F6F6;

		&>view {
			padding-right: 48rpx;
			box-sizing: border-box;

			text {
				font-size: 27rpx;
				font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
				font-weight: normal;
				color: #666666;
			}
		}

		.active {
			text {
				color: #fa2f43 !important;
			}
		}

		.right {
			font-size: 27rpx;
			font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
			font-weight: normal;
			color: #666666;
		}
	}

	.label {
		min-width: 100rpx;
		background: #FA2B47;
		border-radius: 20px;
		padding: 10rpx 12rpx;
		color: #FFFFFF;
	}

	.label2 {
		min-width: 100rpx;
		background: #d4d4d4;
		border-radius: 20px;
		padding: 10rpx 12rpx;
		color: #FFFFFF;
	}
</style>